import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  Switch,
  View,
  DeviceEventEmitter
} from 'react-native';
import Modal from "react-native-modal";
import { withNavigationFocus } from "react-navigation";
import { inject, observer } from 'mobx-react';
import { Icon } from 'react-native-vector-icons'
@inject((stores) => {
    return {
      loginStore: stores.rootStore.loginStore,
      uiStore: stores.rootStore.uiStore,
      myStore: stores.rootStore.myStore
    }
  })
@observer class MyScreen extends React.Component {
    static navigationOptions = {
        header: null,
        headerBackTitle: '返回',
        
    };
    constructor(props){
		super(props);
        this.state = {
            hasLogin: false,
            switchValue: true,
            showAboutModal: false,
            showContactModal: false
        }
	}
    componentDidUpdate(prevProps) {
		if (prevProps.isFocused !== this.props.isFocused && this.props.isFocused) {
		  // Use the `this.props.isFocused` boolean
		  // Call any action
		  //重新获得焦点
		  this._getData();
		}
	}
    componentDidMount() {
		this._getData();
		this.subscription = DeviceEventEmitter.addListener('My', this.refreshData)
    }
    componentWillUnmount() {
		this.subscription.remove();
	};
	refreshData = () => {
		this._getData();
    }
    _getData = () => {
        storage.load({ key: 'token' }).then(async (ret) => {
            if(ret){
                this.props.myStore.getUserInfo();
            }else{
                this.props.loginStore.setUser(null)
            }
        })
    }
    /**
     * 登录
     */
    _loginPress = (navigate) => { 
        navigate('Login');  //跳转到注册过的Register界面
    }
    /**
     * 开关事件
     */
    _onSwitchChange = (switchValue) => {
        this.setState({
            switchValue
        })
    }
    /**
     * 跳转修改个人信息页面
     */
    _goUserInfo = (url) => {
        this.props.navigation.navigate(url)
    }
    /**
     * 退出登录
     */
    _logout = () => {
        // 移除持久化
        storage.remove({ key: 'user' });
        storage.remove({ key: 'token' });
        // 将 Store 中的设置为 null
        this.props.loginStore.setUser(null);
        this.props.navigation.navigate('Login');
    }
    render() {
        const { navigate } = this.props.navigation;  //获取navigation的navigate方法
        return (
            <View style={styles.container}>
                        <View style={styles.loginMain}>
                            <View style={styles.loginHeader}>
                                {/* <View style={styles.userInfo}>
                                    <Image style={styles.userHeader} source={require('../assets/images/robot-dev.png')}></Image>
                                </View> */}
                                <Text style={styles.userName}>{this.props.loginStore.user}</Text>
                            </View>
                            <View style={styles.userCard}>
                                <View style={styles.userCardItem}>
                                    <Text style={styles.c2}>{this.props.myStore.userInfo.invot_sum}</Text>
                                    <Text style={styles.userTxtTit}>总邀请数</Text>
                                </View>
                                <View style={styles.userCardItem}>
                                    <Text style={styles.c1}>{this.props.myStore.userInfo.deposit_sum}</Text>
                                    <Text style={styles.userTxtTit}>总孵化数</Text>
                                </View>
                                <View style={styles.userCardItem}>
                                    <Text style={styles.c1}>{this.props.myStore.userInfo.assets_sum}</Text>
                                    <Text style={styles.userTxtTit}>总资产</Text>
                                </View>
                            </View>
                            <View style={styles.cardResult}>
                                <TouchableOpacity onPress={()=>this._goUserInfo('UserInfo')}>
                                    <View style={styles.cardLine}>
                                        <View style={styles.cardLeft}>
                                            <Icon.MaterialIcons name='person-outline' style={styles.cardIcon}></Icon.MaterialIcons>
                                            <Text style={styles.cardTxt}>更改手机号码</Text>
                                        </View>
                                        <Icon.AntDesign name='right' style={styles.iconRight}></Icon.AntDesign>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={()=>this._goUserInfo('Resetpsw')}>
                                    <View style={styles.cardLine}>
                                        <View style={styles.cardLeft}>
                                            <Icon.Entypo name='key' style={styles.cardIcon}></Icon.Entypo>
                                            <Text style={styles.cardTxt}>重置密码</Text>
                                        </View>
                                        <Icon.AntDesign name='right' style={styles.iconRight}></Icon.AntDesign>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={()=>this.props.navigation.navigate('Notice')}>
                                    <View style={styles.cardLine}>
                                        <View style={styles.cardLeft}>
                                            <Icon.EvilIcons name='question' style={styles.cardIcon}></Icon.EvilIcons>
                                            <Text style={styles.cardTxt}>官方公告</Text>
                                        </View>
                                        <Icon.AntDesign name='right' style={styles.iconRight}></Icon.AntDesign>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={()=>this.setState({showContactModal: true})}> 
                                    <View style={styles.cardLine}>
                                        <View style={styles.cardLeft}>
                                            <Icon.Ionicons name='ios-chatbubbles' style={styles.cardIcon}></Icon.Ionicons>
                                            <Text style={styles.cardTxt}>联系NSS官方</Text>
                                        </View>
                                        <Icon.AntDesign name='right' style={styles.iconRight}></Icon.AntDesign>
                                    </View>
                                </TouchableOpacity>
                                <View style={styles.cardLine}>
                                    <View style={styles.cardLeft}>
                                        <Icon.Foundation name='wrench' style={styles.cardIcon}></Icon.Foundation> 
                                        <Text style={styles.cardTxt}>版本检查更新</Text>
                                    </View>
                                    <Switch value={this.state.switchValue} onValueChange={this._onSwitchChange}></Switch>
                                </View>
                            </View>
                            <View style={styles.logout}>
                                <TouchableOpacity onPress={this._logout}>
                                    <View style={styles.btnlogout}>
                                        <Text style={styles.btnLogoutTxt}>退出登录</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                        {/* :
                        <View style={styles.logoutMain}>
                            <TouchableOpacity
                                onPress={()=>this._loginPress(navigate)}
                            >
                                <View style={[styles.btnlogout,styles.btnLogin]}>
                                    <Text style={styles.btnLogoutTxt}>登录</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    } */}
                    <Modal  isVisible={this.state.showContactModal}>
                        <View style={styles.modalContainer}>
                            <View style={styles.closeBox}>
                                <TouchableOpacity onPress={()=>this.setState({
                                    showContactModal: false
                                })}>
                                    <Icon.Ionicons name='ios-close' style={styles.modalClose}></Icon.Ionicons>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.weCode}>
                                <Image source={require('../assets/images/wcode.jpeg')} style={styles.weCodeImg}></Image>
                                <Text style={styles.weTxt}>官方微信</Text>
                            </View>
                        </View>
                    </Modal>
            </View>
        );
    }
}
const styles = StyleSheet.create({
	container:{
		flex: 1,
		display: 'flex',
		justifyContent:'space-between',
        flexDirection:'column',
    },
    loginHeader:{
        width: '100%',
        display:'flex',
        alignItems: 'center',
        backgroundColor:'#FF7F4B',
		paddingTop: 41,
        height:128
    },
    userInfo:{
        width: 24,
        height: 24,
        overflow:'hidden',
        borderRadius: 24,
    },
    userHeader:{
        width: 24,
        height: 24  
    },
    userName:{
        fontSize: 14,
        color:"#ffffff",
        marginTop: 5
    },
    userCard:{
        marginTop: -35,
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        borderColor: '#BBBBBB',
        borderWidth: 1,
        borderRadius: 8,
        height: 100,
        backgroundColor: '#ffffff',
        display:'flex',
        justifyContent:'space-between',
        alignItems:'center',
        flexDirection:'row'
    },
    userCardItem:{
        alignItems:'center',
        width: '33.33%',
        textAlign:'center'
    },
    c2:{
        color:'#E51C23',
        fontSize: 14
    },
    c1:{
        color:'#101010',
        fontSize: 14
    },
    userTxtTit:{
        color:'#101010',
        fontSize: 14,
        marginTop: 10
    },
    cardResult:{
        paddingLeft: '5%',
        paddingRight: '5%',
    },
    cardLine:{
        borderBottomColor:'#101010',
        borderBottomWidth: 1,
        height:50,
        display:'flex',
        justifyContent:'space-between',
        alignItems:'center',
        flexDirection:'row'
    },
    cardLeft:{
        display:'flex',
        justifyContent:'flex-start',
        alignItems:'center',
        flexDirection:'row'
    },
    cardIcon:{
        fontSize: 18,
        color:'#FF7F4B',
        marginRight: 10
    },
    cardTxt:{
        fontSize:14,
        color:'#101010'
    },
    iconRight:{
        fontSize: 14,
        color:'#101010'
    },
    btnlogout:{
        width: '90%',
        height: 40,
        backgroundColor:'#FF7F4B',
        borderRadius: 8,
        marginLeft:'auto',
        marginRight:'auto',
        marginTop: 30
    },
    btnLogoutTxt:{
        color:'#ffffff',
        fontSize: 14,
        textAlign:'center',
        lineHeight: 40
    },
    modalContainer:{ 
        backgroundColor: 'rgba(232, 229, 229,0.8)',
        padding: 10,
        borderRadius: 8
    },
    closeBox:{
        display:'flex',
        justifyContent:'flex-end',
        alignItems:'flex-end'
    },
    modalClose:{
        color:'#ffffff',
        fontSize:30
    },
    weCodeImg:{
        height:250,
        width: 220,
        marginLeft: 'auto',
        marginRight:'auto'
    },
    weTxt:{
        textAlign:'center',
        marginTop: 40,
        marginBottom: 20,
        color:'#FF7F4B',
        fontSize: 14
    },
    txtBox:{
        paddingBottom: 30
    },
    logoutMain:{
        width: '100%',
        height:'100%',
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        flexDirection:'row'
    },
    btnLogin:{
        width: 150
    }
});
export default withNavigationFocus(MyScreen);